<template>
    <view>
        <view class="seh-box seh-box-w">
            <aSearch
                class="aSearch-input-box"
                button="outside"
                :placeholder="placeholder"
                @input="inputChange"
                @inputChange="inputChange"
                v-model="kw"
            ></aSearch>
        </view>
        <view class="seh-kw">
            <scroll-view :style="scrollStyle" class="kw-list-box" v-show="isShowKwList" scroll-y @scrolltolower="onreachBottom">
                <view class="margin-bottom">
                    <block v-for="(row, index) in kwList" :key="index">
                        <view class="kw-entry" hover-class="kw-entry-tap">
                            <view class="kw-text" @tap.stop="goDetail(row)">
                                <view><u-image border-radius="10" width="230" height="300" :src="row.vod_pic"></u-image></view>
                                <view>
                                    <text>{{ row.vod_name }}</text>
                                    <text>{{ row.vod_year }} {{ row.vod_class }} {{ row.vod_area }} {{ row.vod_lang }}</text>
                                    <text>
                                        {{ i18n('search').actors }}：{{
                                            row.vod_actor.length > 0 ? row.vod_actor : i18n('search').nop
                                        }}
                                    </text>
                                </view>
                            </view>
                            <view class="kw-img"><u-icon name="arrow-right"></u-icon></view>
                        </view>
                    </block>
                    <block v-if="kwList.length == 0">
                        <view v-if="isSearching"><u-loadmore status="loading" /></view>
                    </block>
                    <view class="padding-bottom" v-if="isSearching && kwList.length > 0"><u-loadmore status="loading" /></view>
                    <view class="padding-bottom" v-if="!isSearching && isEnd"><u-loadmore status="nomore" /></view>
                </view>
            </scroll-view>

            <scroll-view :style="scrollStyle" class="kw-box" v-show="!isShowKwList" scroll-y>
                <view class="kw-block" v-if="oldKwList.length > 0">
                    <view class="kw-list-header">
                        <view>历史搜索</view>
                        <view><u-icon name="trash" @click="oldDelete"></u-icon></view>
                    </view>
                    <view class="kw hot-history">
                        <view v-for="(item, index) in oldKwList" @tap="inputChange(item.vod_name)" :key="index">
                            {{ item.vod_name }}
                        </view>
                    </view>
                </view>
                <Adview :adSwitchKg="adSwitchKg" :homeADList="oneAd"></Adview>
                <view class="kw-block">
                    <view class="kw-list-header">
                        <view><u-section title="热门推荐" :right="false" color="#E24197"></u-section></view>
                        <view>
                            <view @tap="hotToggle"><u-icon :name="forbid"></u-icon></view>
                        </view>
                    </view>
                    <view class="kw" v-if="forbid == 'eye-fill'">
                        <view v-for="(item, index) in hotKwList" @tap="inputChange(item.vod_name)" :key="index">
                            {{ item.vod_name }}
                        </view>
                    </view>
                    <view class="hide-hot-tis" v-else><view>当前搜热门搜索已隐藏</view></view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
const MyApp = getApp();
const globalData = MyApp.globalData;
import Adview from '@/components/home-ad/ad-view.vue';
import aSearch from './ay-search-top.vue';
export default {
    components: {
        aSearch,
        Adview
    },
    computed: {
        i18n() {
            return globalData.$t;
        }
    },
    data() {
        return {
            defaultKw: '',
            searchKw: '',
            kw: '',
            oldKwList: [],
            forbid: 'eye-fill',
            isShowKwList: false
        };
    },
    props: {
        placeholder: {
            value: String,
            default: '请输入搜索内容'
        },
        kwList: {
            type: Array,
            default() {
                return [];
            }
        },
        hotKwList: {
            type: [Array, String],
            default() {
                return [];
            }
        },
        oneAd: {
            type: [Array, Object, String],
            default() {
                return [];
            }
        },
        padding: {
            type: Number,
            default: 0
        },
        adSwitchKg: {
            type: Number,
            default: 0
        },
        scrollStyle: {
            type: String,
            default: ''
        },
        isBack: {
            type: [Boolean, String],
            default: false
        },
        isSearching: {
            type: [Boolean, String],
            default: true
        },
        isEnd: {
            type: [Boolean, String],
            default: false
        },
        height: {
            type: Number,
            default: 0
        },
        borderRadius: {
            type: Number,
            default: 0
        },
        themeColor: {
            type: String,
            default: '#33CCCC'
        },
        themeColor_dan: {
            type: String,
            default: '#AFEEEE'
        },
        wordKey: {
            type: String,
            default: 'vod_name'
        }
    },
    created: function() {
        let that = this;
        that.loadOldKw();
    },
    methods: {
        //热门搜索开关
        hotToggle() {
            this.forbid = this.forbid == 'eye-fill' ? 'eye-off' : 'eye-fill';
        },
        blur() {
            uni.hideKeyboard();
        },
        // 触底加载
        onreachBottom() {
            this.$emit('onreachBottom');
        },
        //加载历史搜索,自动读取本地Storage
        loadOldKw() {
            uni.getStorage({
                key: 'OldKeys',
                success: res => {
                    var OldKeys = JSON.parse(res.data);
                    this.oldKwList = OldKeys;
                }
            });
        },
        //监听输入
        inputChange(event) {
            //兼容引入组件时传入参数情况
            var kw = event.detail ? event.detail.value : event;
            if (!kw) {
                //this.kwList = [];
                this.$emit('clearkwList', null);
                this.isShowKwList = false;
                return;
            }
            this.kw = kw || this.placeholder;
            this.isShowKwList = true;
            this.$emit('setListByKw', kw);
        },
        //清除历史搜索
        oldDelete() {
            uni.showModal({
                content: '确定清除历史搜索记录？',
                success: res => {
                    if (res.confirm) {
                        this.oldKwList = [];
                        uni.removeStorage({
                            key: 'OldKeys'
                        });
                    }
                }
            });
        },
        //执行搜索
        goDetail(item) {
            this.saveKw(item);
            this.$emit('goDetail', item);
        },
        //保存关键字到历史记录
        saveKw(item) {
            let _this = this;
            let save = {
                vod_name: item.vod_name,
                vod_id: item.vod_id
            };
            uni.getStorage({
                key: 'OldKeys',
                success: res => {
                    let OldKeys = JSON.parse(res.data);
                    //看是否有相同项，有相同项则不保存
                    let oldHave = false;
                    let findIndex = -1;
                    OldKeys.forEach((v, k) => {
                        if (v.vod_name == save.vod_name) {
                            oldHave = true;
                            findIndex = k;
                        }
                    });

                    if (!oldHave) {
                        OldKeys.unshift(save);
                    } else {
                        OldKeys.splice(findIndex, 1);
                        OldKeys.unshift(save);
                    }
                    //最多6个纪录
                    OldKeys.length > 6 && OldKeys.pop();
                    uni.setStorage({
                        key: 'OldKeys',
                        data: JSON.stringify(OldKeys)
                    });
                    this.oldKwList = OldKeys; //更新历史搜索
                },
                fail: e => {
                    var OldKeys = [save];
                    uni.setStorage({
                        key: 'OldKeys',
                        data: JSON.stringify(OldKeys)
                    });
                    this.oldKwList = OldKeys; //更新历史搜索
                }
            });
        },
        initShow() {
            this.kw = '';
            this.isShowKwList = false;
            this.$emit('clearkwList', null);
        }
    }
};
</script>

<style lang="scss">
.seh-box {
    // width: 100%;
    background-color: #ffffff;
    padding: 15upx 2.5%;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
}
.seh-box-w {
    width: 100%;
}

.seh-box .aSearch-input-box {
    width: 100%;
}

.seh-box .input-box {
    width: 85%;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.seh-box .input-box > input {
    width: 100%;
    height: 60upx;
    font-size: 32upx;
    border: 0;
    border-radius: 60upx;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 3%;
    margin: 0;
    background-color: #f5f5f5;
    border: 0.5px solid #c0c0c0;
}

.placeholder-class {
    color: #9e9e9e;
}

.seh-kw {
    width: 100%;
    background-color: rgb(242, 242, 242);
}

.kw-list-box {
    height: calc(100vh - 110upx);
    padding-top: 10upx;
    border-radius: 20upx 20upx 0 0;
    background-color: #fff;
}

.kw-entry-tap {
    background-color: #eee;
}

.kw-entry {
    width: 94%;
    min-height: 90upx;
    margin: 0 3%;
    font-size: 30upx;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30upx 0;
    // border-bottom: solid 1upx #f8f8f8;
}

.kw-entry image {
    width: 60upx;
    height: 60upx;
}

.kw-entry .kw-text,
.kw-entry .kw-img {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.kw-entry .kw-text {
    width: 90%;
}

.kw-entry .kw-text view {
    padding-right: 16upx;
}

.kw-entry .kw-text view:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.kw-entry .kw-text view:nth-child(2) text {
    padding: 10upx 0;
    max-height: 130upx;
    overflow-y: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.kw-entry .kw-text view text:nth-child(1) {
    font-weight: 700;
}

.kw-entry .kw-img {
    width: 10%;
    justify-content: center;
}

.kw-box {
    height: calc(100vh - 110upx);
    border-radius: 20upx 20upx 0 0;
    background-color: #fff;
}

.kw-box .kw-block {
    padding: 10upx 0;
}

.kw-box .kw-block .kw-list-header {
    width: 94%;
    padding: 10upx 3%;
    font-size: 27upx;
    color: #333;
    display: flex;
    justify-content: space-between;
}

.kw-box .kw-block .kw-list-header image {
    width: 40upx;
    height: 40upx;
}

.kw-box .kw-block .kw {
    width: 100%;
    padding: 3px 3%;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
}

.kw-box .kw-block .hot-history {
    max-height: 200upx;
    overflow-y: auto;
}

.kw-box .kw-block .hide-hot-tis {
    display: flex;
    justify-content: center;
    font-size: 28upx;
    color: #6b6b6b;
}

.kw-box .kw-block .kw > view {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60upx;
    padding: 0 20upx;
    margin: 10upx 20upx 10upx 0;
    height: 60upx;
    font-size: 28upx;
    background-color: rgb(242, 242, 242);
    color: #6b6b6b;
}
.margin-bottom {
    margin-bottom: 180upx;
}
</style>
